<template>
  <!-- 点击出现音乐 -->
  <!-- @click="add_audio" -->
  <div class="player_bar">
    <div class="bar_l">
      <div class="img_warp">
        <img :src="song_info.picUrl" alt="" />
      </div>
    </div>
    <div class="bar_m">
      <div>{{ song_info.song_name }}</div>
      <div>{{ song_info.ars | add_filter }} - {{ song_info.album_name }}</div>
    </div>
    <div class="bar_r">
      <i class="iconfont iconshangyishou1" @click.stop="$emit('prev')"></i>
      <van-icon
        name="play-circle-o"
        v-if="!play_state"
        @click.stop="play_song"
      />
      <van-icon name="pause-circle-o" v-else @click.stop="pause_song" />
      <i class="iconfont iconshangyishou" @click.stop="$emit('next')"></i>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["play_state", "song_info"]),
  },
  filters: {
    add_filter(val) {
      if (!val) {
        return;
      }
      let res = "";
      val.forEach((el) => {
        res += el.name + "/";
      });
      return res.slice(0, -1);
    },
  },
  methods: {
    pause_song() {
      this.$audio.pause();
    },

    play_song() {
      this.$audio.play();
    },
  },
};
</script>

<style lang="scss" scoped>
.player_bar {
  z-index: 555;
  display: flex;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 50px;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(99, 90, 90, 0.932) -5%,
    rgba(115, 215, 228, 0.884) 46%,
    rgba(88, 143, 226, 0.884) 102%
  );
  overflow: hidden;
  .bar_l {
    width: 15%;
    .img_warp {
      margin: 3px 0 0 8px;
      img {
        border-radius: 50%;
        width: 45px;
        height: 45px;
        width: 100%;
      }
    }
  }
  .bar_m {
    width: 60%;
    margin-top: 5px;
  }
  .bar_r {
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    i {
      font-size: 40px;
    }
  }
}
</style>
